<template>
  <div class="main">
     <div class="top">
      <div class="back" @click="onClickLeft('/')">
        <img src="../assets/img/back.png" alt=""  />
      </div>
      <div class="title">
    {{$t('m.Dpin认购记录')}}
      </div>
    </div>  
    <div class="tabnav">
      <div class="item" :class="acitve==1?'act':'' " @click="toTab(1)">{{$t('m.运行中')}}</div>
      <div class="item" :class="acitve==2?'act':'' " @click="toTab(2)">{{$t('m.已结束')}}</div>
     </div>

       <div class="list">
      <div class="" v-for="(item,i) in list" :key="i">
        <div class="item fadeInUp" :class="item.status==2?'over':''"  v-if="acitve==item.status" >
        <div class="cont">
          <div class="ritem">
          <div class="laber">NO.{{item.orderIndex}}</div>
          <div class="num">{{item.createdAt|formatDate}}</div>
          </div>
          <div class="ritem fr" >
            <div class="laber">{{$t('m.订单金额')}}</div>
          <div class="num">{{dexc(item.amount)}} USDT</div>
          </div>
        
        </div>    
        <div class="cont" >        
          <div class="ritem" >
          <div class="laber">{{$t('m.支付币种')}}</div>
          <div class="num"> {{item.payType==1?'USDT':item.payType==2?'Hlu':''}}   </div>
        </div>
    <div class="ritem fr" >
            <div class="laber">{{$t('m.支付数量')}}</div>
          <div class="num">{{dexc(item.payAmount)}} </div>
          </div>       
        </div>
        
        <div class="cont" >
       
        <div class="ritem">
          <div class="laber">{{$t('m.出局节点')}}</div>
          <div class="num">{{dexc(item.outAmount)}} USDT</div>
        </div>
          <div class="ritem fr">
          <div class="laber">{{$t('m.当前状态')}}</div>
          <div class="num" :class="acitve==1?'org':'hui'">{{acitve==1?$t('m.运行中'):$t('m.已结束')}}</div>
        </div>
        </div>
      </div>
       
    </div>
        <div v-if="list.length==0"  class="noData">
           <img src="../assets/img/logo.png" alt="" >
           <div class="ttx">{{$t('m.暂无数据')}}</div>
      </div>
     </div>
     <Loadings v-if="uploading"/>  
  </div>
</template>

<script>
import {getOrders} from "@/api/Public";
import Loadings from '@/components/loading.vue'
import Web3 from 'web3'
export default {
  data() {
    return {
      userWallet: "",
      list: [],
      uploading:false,
      acitve:1,
    };
  },
  components: {Loadings},
  computed: {
    dqyy() {
      if (this.$store.getters.language) {
        return this.$store.getters.language;
      } else {
        return "zh-CN";
      }
    },
    bdID() {
      return this.$store.getters.intID;
    },
  },
   watch: {
    "$store.getters.userWallet": function (val) {
       this.onClickLeft('/')
    },
    deep: true,
    immediate: true,
  },
  filters: {
     formatDate(e) {
      if (e == 0) {
        return "";
      } else {
        let date = new Date(e * 1000);
        let Y = date.getFullYear();
        let M = date.getMonth() + 1;
        let D = date.getDate();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        if (M < 10) {
          M = "0" + M;
        }
        if (D < 10) {
          D = "0" + D;
        }
        if (h < 10) {
          h = "0" + h;
        }
        if (m < 10) {
          m = "0" + m;
        }
        if (s < 10) {
          s = "0" + s;
        }
        return `${Y}/${M}/${D} ${h}:${m}:${s}`;
      }
    },
    yingcang(val) {
      if (val) {
        let a = val.replace(/(\w{18})\w+(\w{18})/, "$1...$2");
        return a;
      } else {
        return "";
      }
    },
 
  },
  // beforeCreate() {
  //   var a = setInterval(() => {
  //     if (typeof window.ContractEth !== "undefined") {  
  //       clearInterval(a);
  //     }
  //   }, 1000);
  // },
  created() {
    this.userWallet = this.$store.getters.userWallet;
     this.getlist()    
  },

  methods: {
     toTab(e){
      this.acitve=e
      this.getlist()
    },
    dexc(val){
    if(val){
      let  ethereum = window.ethereum
    let web3s = new Web3(ethereum);
      let amount=  web3s.utils.fromWei(val +'', 'ether'); 
      // let num =val/Math.pow(10,18)
      return val? Math.floor(amount*1000000)/1000000:'0'
    }else{
      return 0
    }
    },
    async getlist(){    
      this.uploading=true  
      getOrders(this.userWallet,this.acitve).then(res=>{
        setTimeout(() => {
      this.uploading=false
    }, 400); 
        if(res){
          this.list=res
        }
      })
      
    },

    onClickLeft(val) {
      if (this.loading) {
        this.$notify(this.$i18n.t("m.wxtswtjxz"));
        return;
      } else {
        this.$router.replace({ path: val });
      }
    },
      to(url) {
      location.href = url;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../src/assets/scss/_handle.scss";
$t-mf: "PingFang";
$t-f: "DINAlternate-Bold";
.main {
      position: relative;
  background:  #161628 url("../assets/img/dsbg.jpg")  fixed no-repeat;
    // background: #0F112A;
   background-size: cover;
     background-position: top center;
  overflow-x: hidden;
  width: 750px;
  margin: 0 auto;
  min-height: 100vh;
  ::v-deep.van-nav-bar__content {
    height: 80px !important;
  }
  ::v-deep.van-nav-bar__arrow {
    font-size: 36px;
  }
  ::v-deep.van-ellipsis {
    font-size: 32px;
    line-height: 44px;
  }
  .top { background: #012f2bbf;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    height: 96px;
    margin: 0 auto;
    color: #fff;
       border-bottom: 1px solid #1cc10e;
      .back {
      position: absolute;
    left: 20px;
        width: 50px;
    height: 50px;
    // background: linear-gradient(45deg,#ffffff, #ffffff);
    // border-radius: 50% ;
    display: flex;
    align-items: center;
    justify-content: center;
      img {
        height: 50px;
        width: 50px;
      }
      .icosn {
        height: 36px;
        margin-right: 5px;
        width: 36px;
      }
    }
    .title{
        background: linear-gradient(234deg,#ffffff, #ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      font-size: 36px;
      font-weight: 600;
      font-family: $t-f;
    }
  }
     .tabnav{
    display: flex;
    align-items: center;
    height: 68px;
    justify-content: center;
    // border-bottom: 1px solid #1cc10e;
    margin-top: 16px;
    padding-bottom: 26px;
    .item{
      width: 340px;
      height: 68px;
      font-size: 28px;
      color: #A6A6A6;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
    }
    .act{
      font-weight: bold;
      color: #0af347;
      font-size: 34px;
      animation: all 0.3s;
    }
  }
  
  .list{
    margin-bottom: 80px;
    min-height: 40vh;
    .item{
      border-radius: 0px;
      padding: 0 30px;
      margin: 20px 30px 20px;
      background: #00000070;
      border: 1px solid #1cc10e;
      position: relative;
      overflow: hidden;
      .cont{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 40px 0;
        .ritem{
          display: flex;
        align-items: flex-start;
        flex-direction: column;
        .laber{
          font-size: 24px;
          color: #a6a6a6;
        }
        .num{
          font-size: 28px;
          color: #ffffff;
          margin-top: 8px;
          text-align: left;
        }
        .org{
          color: #1cc10e;
          font-weight: bold;
        }
        .hui{
          color: #a6a6a6;
          font-weight: bold;
        }
        }  
        .fr{
          align-items: flex-end;
        }       
      }
      .buttom{
        display: flex;
        width: 100%;    
        margin-top: 30px;  
        padding-top: 30px;  
        margin-bottom: 40px;      
        border-top: 1px solid #582204;
        .btn{
         background: transparent;
          color: #ffffff;
          border: none;
          border-radius: 32px;
          height: 102px;
          width: calc(100% - 32px);
          font-size: 32px;
          margin:  0 16px;
          font-weight: bold;
          border: 1px solid #1cc10e;
          
        }
        .img{
          width: 38px;
          height: 38px;
        }
        .btn:hover{
          color: #ffffff;
          background: linear-gradient(270deg, #1cc10e, #1cc10e);
        }
      }
    }
    .over{
        .num{
          color: #a6a6a6 !important;
        }
       }
  }
  
}
</style>